<!--隔离设备-->
<template>
  <div class="current-page">
    <div class="search-area" style="position:relative">
      <div class="search-form">
        <el-form label-width="100px" :model="searchForm">
          <el-row>
            <el-col :span="5">
              <el-form-item label="日志类别">
                <el-select v-model="searchForm.alarmLevel" placeholder="请选择">
                  <el-option label="告警" value="alarm">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="消息审计">
                <el-select v-model="searchForm.alarmLevel" placeholder="请选择">
                  <el-option label="登录" value="login">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="消息内容">
                <el-input v-model="searchForm.logCode" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发生时间">
                <el-date-picker v-model="operateTime" type="daterange" range-separator="-"
                                start-placeholder="开始日期" end-placeholder="结束日期" style="width:95%;"
                                clearable :editable="false"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-button type="primary">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
          <el-row>
            <el-col :span="1" style="margin-bottom: 18px;float:right;padding-right: 20px">
              <el-button type="primary">批量审计</el-button>
            </el-col>
          </el-row>
      </div>
     
    </div>
    <com-table
      :tableData="tableData"
      url="api-vss/rest-auth-log"
      method="get"
      :has-data="hasData"
      :table-head-list="tableHeadList"
      :total-count="totalCount"
      :page-num="pageNum"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :table-loading="loading"
      :table-height="tableHeight"
      :is-show-select="true"
      :page-show="true"
      :handle-show="true"
      :merge-flag="false"
      @setSearchHeight="setSearchHeight"
      @openDialog="openDialog"
      ref="comTable"
    >
    </com-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogControl"
      width="40%"
      @close="dialogControl = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="strategy-dialog equip-detail el-dialog-widthSmall"
      v-dialogDrag
      @closed="dialogClosed"
    >
      <el-form
        ref="infoForm"
        :model="infoForm"
        label-width="150px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="18">
            <el-form-item label="应用标识" prop="uuid">
              <el-input
                v-model.trim="infoForm.uuid"
                placeholder="请输入标识"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="应用名称" prop="name">
              <el-input
                v-model.trim="infoForm.name"
                placeholder="请输入名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="应用ip" prop="ip">
              <el-input
                v-model.trim="infoForm.ip"
                placeholder="请输入ip"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="应用端口" prop="port">
              <el-input
                v-model.trim="infoForm.port"
                placeholder="请输入端口"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="应用类别">
              <el-select v-model="infoForm.type" placeholder="请选择">
                <el-option
                  v-for="item in attrData"
                  :key="item.XPRO_PATH"
                  :label="item.content"
                  :value="item.XPRO_PATH">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogControl = false">取 消</el-button>
        <el-button
          v-if="dialogTitle == '新增应用资源'"
          type="primary"
          @click="addTerminal"
          >确 定</el-button
        >
        <el-button
          v-if="dialogTitle == '修改应用资源'"
          type="primary"
          @click="modifyTerminal"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ComTable from "../../components/table/comTable";
export default {
  name: "cmf_tplate",
  data() {
    return {
      pageSizes: [5, 10, 20, 50, 100],
      hasData: false,
      dialogControl: false,
      dialogTitle: "",
      tableHeadList: [
        // {colDisabled: false, colHidden: false, colSearch: true, colSort: false, columnComment: "应用标识", columnName: "uuid",},
        {columnComment: "账号", columnName: "authUserAccount",},
        {columnComment: "姓名", columnName: "authUserName",},
        {width: "300px", columnComment: "登录类型", columnName: "authType",},
        {columnComment: "登录结果", columnName: "authResult",},
        {columnComment: "登录时间", columnName: "ctime",},
        {columnComment: "登录IP", columnName: "authIp",},
      ],
      pageNum: 0,
      pageSize: 10,
      totalCount: 0,
      boolean: [],
      tableData: [], // 表格数据
      tableHeight: "", // 表格高度
      loading: false, // 数据加载状态遮罩
      tableDataSelected: [],
      operateTime: [],
      xproPath:'',
      searchForm: {
        warnState: "",
        warnRank: "",
        warnContent: "",
        objType: "",
      },
      infoForm: {
        from:'本地'
      },
      attrData:[],
      rules: {
        // 表单验证规则
        name: [{ required: true, trigger: "blur", message: "请输入名称" }],
      },
      emwCheckList: [],
    };
  },
  components: {
    ComTable,
  },
  created() {
    this.setTableHeight();
  },
  methods: {
    refreshTable() {
      if (this.hasData) {
        this.getTableData(this.pageNum, this.pageSize);
      } else {
        // 调用子组件中的getTableData
        this.$refs.comTable.getTableData();
      }
    },
    //重新加载表格
    setSearchHeight() {
      //搜索区域高度
      if (this.$refs.search !== undefined) {
        this.$nextTick(() => {
          let searchHeight = this.$refs.search.offsetHeight;
          this.setTableHeight(searchHeight);
        });
      }
    },
    //关闭表单
    dialogClosed() {
      this.infoForm = {
        name: "",
        ip:'',
        port: '',
        type: [],
        from:'本地'
      };
    },

    /**
     * 设置表格的高度
     */
    setTableHeight() {
      let clientHeiht =
        window.innerHeight || document.documentElement.clientHeight;
      this.tableHeight = clientHeiht - 250;
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        "font-size": "14px",
        "font-weight": 600,
        color: "#606266",
      };
    },
    //查询
    //todo 待后台接口
    search() {},

    //新建与修改
    openDialog(type, row) {
      this.dialogControl = true;
      console.log(type);
      if (type === "add") {
        this.dialogTitle = "新增应用资源";
      } else if (type === "update") {
        this.dialogTitle = "修改应用资源";
        console.log(row, "row");
        let form=JSON.parse(JSON.stringify(row))
        console.log(form,'qqqq');
        this.xproPath= form.XPRO_PATH,
        this.infoForm = {
          name: form.name,
          uuid:form.uuid,
          ip:form.ip,
          port: form.port,
          type: [],
          from:'本地'
        };
        if(form.type.length>0){
          form.type.forEach(item=>{
            this.infoForm.type=item.XPRO_PATH
          })
        }
      }
    },

      /**
       * 新增
       */
     addTerminal(){
        this.$refs.infoForm.validate(flag => {
          if (flag) {
            let params = {};
            for (let item in this.infoForm) {
             if (this.infoForm[item]) {
               if(item=='type'){
                 if(this.infoForm[item].length!==0){
                   console.log(item,this.infoForm[item],'item789')
                   params[item] = [this.infoForm[item]];
                 }
               }else{
                 params[item] = this.infoForm[item];
               }
             }
            }
            console.log(params);
            this.loading = true;
            this.$postForJson('app', params).then(jsonData => {
              this.dialogControl = false;
              this.loading = false;
              let datas = jsonData.data;
              if (!datas.success) {
                this.publicModal.$emit('tips', {
                  show: true,
                  publicModalMessage: datas.msg,
                  fontIcon: 'errorWarning'
                })
                return false
              }
              this.$message({
                message: '新增文本文件信息成功！',
                type: 'success'
              });
              this.refreshTable();
              this.dialogClosed()
            })
          }
        })
      },

      /**
       * 修改
       */
      modifyTerminal() {
        this.$refs.infoForm.validate(flag => {
          if (flag) {
              let params = {};
               for (let item in this.infoForm) {
                if (this.infoForm[item]) {
                  if(item=='type'){
                    if(this.infoForm[item].length!==0){
                      console.log(item,this.infoForm[item],'item789')
                      params[item] = [this.infoForm[item]];
                    }
                  }else{
                    params[item] = this.infoForm[item];
                  }
                }
            }
             let url = this.xproPath;
              this.loading = true;
              console.log(params,'params')
              this.$postForJson(url, params).then((jsonData) => {
                this.dialogControl = false;
                this.loading = false;
                let datas = jsonData.data;
                if (!datas.success) {
                  this.publicModal.$emit('tips', {
                    show: true,
                    publicModalMessage:datas.msg,
                    fontIcon: 'errorWarning'
                  })
                  return false
                }
                this.$message({
                  message: '修改文本文件信息成功',
                  type: 'success'
                });
                this.refreshTable();
                this.dialogClosed()
              })

          }
        })
      },
    //重置
    clearData() {
      this.searchForm = {};
    },
  },
};
</script>
<style scoped>
@import "../../assets/css/treeAndTable.css";
@import "../../assets/css/commonTable";

.view {
  position: relative;
  left: 190px;
}

.title-left {
  display: inline-block;
  font-weight: 600;
  margin-left: 20px;
  margin-top: 7px;
}

.right {
  float: right;
  margin-right: 20px;
}

.block {
  text-align: center;
  margin-right: 20px;
  margin-top: 10px;
}

.checkTitle {
  width: 164px;
  height: 16px;
}

.importOrgInfo {
  cursor: pointer;
  color: #101fec;
  text-decoration: underline;
}

.importBody {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.seamless-warp {
  height: 250px;
  overflow: hidden;
}

.importIcon {
  font-size: 52px;
  width: 90px;
  text-align: center;
}

.new-search-area .btn-area .el-button {
  margin-bottom: 10px;
}

.hstyle {
  color: lightskyblue;
  margin: 10px;
  border-bottom: 1px solid #999;
}

.pstyle {
  margin-left: 25px;
  cursor: pointer;
}

.rightStyle {
  /* padding-left: 5px; */
  border: 1px solid rgb(235, 238, 245);
  border-radius: 5px;
}

ul {
  padding-inline-start: 25px;
}

ul li {
  list-style-type: none;
  line-height: 25px;
  font-size: 15px;
}

ul li:hover {
  color: lightskyblue;
  cursor: pointer;
}

.active {
  color: lightskyblue;
}

.butt {
  margin-left: 116px !important;
  margin-top: 22px;
  margin-bottom: 20px;
}

.page {
  position: absolute;
  bottom: 63px;
  left: 900px;
}
</style>
